---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { ArrowLeft, Copy, Check, Library, Calendar, User } from 'lucide-react';
import collectionsData from '../data/collections.json';
export function getStaticPaths() {
return collectionsData.collections.map((collection) => ({
params: { slug: collection.slug },
props: { collection },
}));
}
interface Library {
name: string;
description: string;
version: string;
contentVersion: string;
}
interface Collection {
slug: string;
name: string;
description: string;
author: string;
url: string;
libraries: Library[];
updatedAt: string;
}
interface Props {
collection: Collection;
}
const { collection } = Astro.props;
const installCommand = `npx @libragen/cli install --collection ${collection.slug}`;
---
<BaseLayout title={`${collection.name} - Libragen Collections`} description={collection.description}>
<Header />
<main id="main-content" class="pt-20">
<div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
<!-- Back link -->
<a
href="/"
class="mb-8 inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
<ArrowLeft className="h-4 w-4" />
Back to collections
</a>
<!-- Header -->
<header class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">{collection.name}</h1>
<p class="mt-2 text-lg text-gray-600 dark:text-gray-400">{collection.description}</p>
<div class="mt-4 flex flex-wrap items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
<span class="flex items-center gap-1.5">
<User className="h-4 w-4" />
{collection.author}
</span>
<span class="flex items-center gap-1.5">
<Calendar className="h-4 w-4" />
Updated {collection.updatedAt}
</span>
<span class="flex items-center gap-1.5">
<Library className="h-4 w-4" />
{collection.libraries.length} libraries
</span>
</div>
</header>
<!-- Install Command -->
<section class="mb-12 rounded-xl border border-gray-200 bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-800/50">
<h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
Install Command
</h2>
<div class="flex items-center gap-3">
<code
class="flex-1 overflow-x-auto rounded-lg bg-gray-900 px-4 py-3 font-mono text-sm text-gray-300 dark:bg-gray-950"
>
{installCommand}
</code>
<button
id="copy-btn"
data-command={installCommand}
class="shrink-0 rounded-lg bg-indigo-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-500"
>
<span class="copy-text flex items-center gap-2">
<Copy className="h-4 w-4" />
Copy
</span>
<span class="copied-text hidden items-center gap-2">
<Check className="h-4 w-4" />
Copied!
</span>
</button>
</div>
</section>
<!-- Libraries List -->
<section>
<h2 class="mb-6 text-xl font-semibold text-gray-900 dark:text-white">Libraries in this collection</h2>
<div class="space-y-4">
{
collection.libraries.map((lib) => (
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
<div class="flex items-start justify-between">
<div>
<h3 class="font-semibold text-gray-900 dark:text-white">{lib.name}</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{lib.description}</p>
</div>
<div class="text-right text-sm">
<div class="font-mono text-gray-500 dark:text-gray-400">v{lib.version}</div>
<div class="text-xs text-gray-400 dark:text-gray-500">content: {lib.contentVersion}</div>
</div>
</div>
</div>
))
}
</div>
</section>
<!-- Usage -->
<section class="mt-12 rounded-xl border border-indigo-200 bg-indigo-50 p-6 dark:border-indigo-800 dark:bg-indigo-950/30">
<h2 class="mb-3 font-semibold text-indigo-900 dark:text-indigo-200">After Installing</h2>
<p class="mb-4 text-sm text-indigo-800 dark:text-indigo-300">
Once installed, you can query these libraries using the libragen MCP server or CLI:
</p>
<code
class="block overflow-x-auto rounded-lg bg-gray-900 px-4 py-3 font-mono text-sm text-gray-300 dark:bg-gray-950"
>
npx @libragen/cli query "How do I use React hooks?"
</code>
</section>
</div>
</main>
<Footer />
</BaseLayout>
<script>
const copyBtn = document.getElementById('copy-btn');
if (copyBtn) {
copyBtn.addEventListener('click', async () => {
const command = copyBtn.dataset.command;
if (command) {
await navigator.clipboard.writeText(command);
const copyText = copyBtn.querySelector('.copy-text');
const copiedText = copyBtn.querySelector('.copied-text');
if (copyText && copiedText) {
copyText.classList.add('hidden');
copiedText.classList.remove('hidden');
copiedText.classList.add('flex');
setTimeout(() => {
copyText.classList.remove('hidden');
copiedText.classList.add('hidden');
copiedText.classList.remove('flex');
}, 2000);
}
}
});
}
</script>
